<template>
  <div class="continer">
    <!-- {{$translationMain("翻译")}} -->
    <div class="nav_ection">
      <div class="nav_content">
        <div class="left_icon">
          <div class="logo_content">
            <img style="width: 40px; height: 40px" src="../assets/logo.png" />
          </div>
          <div class="luage_settings" @mouseover="language_setting('简体中文')">
            <span>{{ lenguaje_texto.value }}</span>
            <img
              src="../assets/arror.png"
              style="width: 16px; height: 9px; margin-left: 0.5rem"
            />
          </div>
        </div>
        <div class="search_content">
          <div class="search_searchs" @click="search_search()">
            <div><img src="../assets/searc.png" /></div>
            <div>
              <input type="search" placeholder="请输入昵称" maxlength="20" />
            </div>
          </div>
        </div>
        <div class="findPage_title">
          <ul>
            <li
              @click="change_titles(1)"
              :class="is_dataNumber == 1 ? 'Selected_title' : ''"
            >
              聊天
            </li>
            <li
              @click="change_titles(2)"
              :class="is_dataNumber == 2 ? 'Selected_title' : ''"
            >
              发现
            </li>
            <li
              @click="change_titles(3)"
              :class="is_dataNumber == 3 ? 'Selected_title' : ''"
            >
              充值
            </li>
            <li
              @click="change_titles(4)"
              :class="is_dataNumber == 4 ? 'Selected_title' : ''"
            >
              升级
            </li>
          </ul>
        </div>
        <div class="user_content" @mouseover="Drop_sections">
          <div class="head_imgs">
            <img src="../assets/deault_imgs.png" />
          </div>
          <div>limeimei</div>
        </div>
      </div>
      <!-- //设置多语言下拉框 -->
      <div class="language_countries" v-if="lanuage" @mouseleave="mouseLeave">
        <template v-for="(item, index) in gift_type">
          <div
            :key="item.key"
            @mouseover="more_luage(item.key)"
            @click="luage_luage(item.key, item.value)"
            :class="luage_show == item.key ? 'seclected_luge' : ''"
          >
            {{ item.value }}
          </div>
        </template>
      </div>
      <!-- 结束。。。。。。 -->
      <!-- 设置我的下拉框 -->
      <div class="Drop_sections" v-if="is_mySetting" @mouseleave="Drop_down">
        <template v-for="(item, index) in setting_arry">
          <div
            :key="index"
            @mouseover="Drop_box(item)"
            @click="down_box(index + 1)"
            :class="Drop_vaue == item ? 'seclected_luge' : ''"
          >
            {{ item }}
          </div>
        </template>
      </div>
      <!-- 结束 -->
    </div>
    <!--  -->
    <NanoDialog :dialog_config="dialog_config_single">
      <div class="avater-div">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"   
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <el-form
        :model="singleForm"
        status-icon
        ref="singleForm"
        label-width="100px"
        class="demo-singleForm"
      >
        <el-form-item label="生日">
          <el-date-picker
            style="width: 320px"
            type="date"
            format="yyyy/MM/dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="身高（cm）" prop="tall">
          <el-input
            type="password"
            v-model="singleForm.checkPass"
            style="width: 320px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="体重（kg）" prop="weight">
          <el-input
            type="password"
            v-model="singleForm.checkPass"
            style="width: 320px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="婚姻状况" prop="marriage" class="marriage">
          <el-input
            placeholder="请输入内容"
            v-model="singleForm.marriage"
            style="width: 320px"
          >
            <template slot="append"
              ><el-dropdown>
                <el-button class="el-icon-arrow-down"></el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) of marriage_list"
                    :key="index"
                    >{{ item }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown></template
            >
          </el-input>
        </el-form-item>
        <el-form-item label="国家" prop="country">
          <el-select
            v-model="singleForm.country"
            placeholder="请选择"
            style="width: 320px"
          >
            <el-option
              v-for="item in country_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="个性签名" prop="sing_tip">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="singleForm.sing_tip"
            style="width: 320px"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('singleForm')"
            class="btn"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </NanoDialog>
    <NanoDialog :dialog_config="dialog_config_password">
      <el-form :model="password_form" class="demo-password_form">
        <el-form-item prop="pass">
          <el-input
            type="password"
            v-model="password_form.pass"
            placeholder="请输入您的旧密码"
            style="width: 320px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input
            type="password"
            v-model.trim="password_form.checkPass"
            placeholder="请输入您的新密码"
            style="width: 320px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirmPass">
          <el-input
            v-model.trim="password_form.confirmPass"
            placeholder="请再次输入您的密码"
            style="width: 320px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('password_form')"
            class="btn"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </NanoDialog>
  </div>
</template>
<script>
export default {
  name: "Header",
  data: () => ({
    is_dataNumber: 2,
    Drop_vaue: "",
    is_mySetting: false, //是否显示设置弹框
    setting_arry: ["我的资料", "修改密码", "退出登陆"],
    lanuage: false,
    luage_show: "",
    lenguaje_texto: {
      key: "en-us",
      value: "English",
    },
    gift_type: [
      {
        key: "en-us",
        value: "English",
      },
      {
        key: "zh-CN",
        value: "简体中文",
      },
      {
        key: "zh-tw",
        value: "中文(繁体)",
      },
      {
        key: "ko-kr",
        value: "한국어",
      },
      {
        key: "ru-ru",
        value: "русский",
      },
      {
        key: "de-de",
        value: "Deutsch",
      },
      {
        key: "es-es",
        value: "Español",
      },
      {
        key: "ja-jp",
        value: "日本語",
      },
    ],
    languageJSON: {
      // 简体中文
      "zh-CN": "zh-cn",
      "zh-CHS": "zh-cn",
      "zh-SG": "zh-cn",
      // 繁体字
      "zh-TW": "zh-tw",
      "zh-MO": "zh-tw",
      "zh-HK": "zh-tw",
      "zh-CHT": "zh-tw",
      // 英语
      "en-AU": "en-us",
      "en-BZ": "en-us",
      "en-CA": "en-us",
      "en-CB": "en-us",
      "en-IE": "en-us",
      "en-JM": "en-us",
      "en-NZ": "en-us",
      "en-PH": "en-us",
      "en-ZA": "en-us",
      "en-TT": "en-us",
      "en-GB": "en-us",
      "en-US": "en-us",
      "en-ZW": "en-us",
      "en-us": "en-us",
      // 日语
      "ja-JP": "ja-jp",
      // 韩语
      "ko-KR": "ko-kr",
      // 德语
      "de-AT": "de-de",
      "de-DE": "de-de",
      "de-LI": "de-de",
      "de-LU": "de-de",
      "de-CH": "de-de",
      // 俄语
      "ru-RU": "ru-ru",
      // 西班牙语
      "es-AR": "es-es",
      "es-BO": "es-es",
      "es-CL": "es-es",
      "es-CO": "es-es",
      "es-CR": "es-es",
      "es-DO": "es-es",
      "es-EC": "es-es",
      "es-SV": "es-es",
      "es-GT": "es-es",
      "es-HN": "es-es",
      "es-MX": "es-es",
      "es-NI": "es-es",
      "es-PA": "es-es",
      "es-PY": "es-es",
      "es-PE": "es-es",
      "es-PR": "es-es",
      "es-ES": "es-es",
      "es-UY": "es-es",
      "es-VE": "es-es",
    },
    ///www
    imageUrl: "", // 图片连接
    country_list: [
      {
        label: "中国",
        value: "86",
      },
    ], //国家数组
    marriage_list: ["未婚", "已婚", "离异", "分居", "丧偶"], // 婚姻状态数组
    singleForm: {
      birdthday: "", // 生日
      tall: "", // 身高
      weight: "", // 体重
      marriage: "", //婚姻
      country: "", // 国家
      sing_tip: "", //个性签名
    },
    password_form: {
      pass: "", // 旧密码
      checkPass: "", // 新密码
      confirmPass: "", // 确认新密码
    },
    dialog_config_single: {
      title: "我的资料",
      open: false,
      width: "30%",
    }, // 我的资料
    dialog_config_password: {
      title: "修改密码",
      open: false,
      width: "30%",
    }
  }),
  methods: {
    change_titles(vals) {
      this.is_dataNumber = vals;
      if (vals == 1) {
        this.$router.push({ path: "/chat" });
      } else if (vals == 2) {
        this.$router.push({ path: "/" });
      } else if (vals == 3) {
        this.$router.push({ path: "/find", query: { from: 6 } });
      } else if (vals == 4) {
        this.$router.push({ path: "/find", query: { from: 7 } });
      }
    },
    search_search() {
      this.$router.push({ path: "/search" });
    },
    //
    language_setting(luage) {
      this.lanuage = !this.lanuage;
    },
    more_luage(luage) {
      this.luage_show = luage;
    },
    mouseLeave() {
      this.lanuage = !this.lanuage;
    },
    luage_luage(luage, luage_text) {
      this.lenguaje_texto.key = luage;
      this.lenguaje_texto.value = luage_text;
      this.lanuage = !this.lanuage;
      this.lang_Symbol = luage;
    },
    Drop_sections() {
      this.is_mySetting = true;
    },
    Drop_down() {
      this.is_mySetting = false;
    },
    Drop_box(val) {
      this.Drop_vaue = val;
    },
    down_box(val) {
      if (val == 1) {
        this.dialog_config_single.open = true;
      } else if (val == 2) {
        this.dialog_config_password.open = true;
      } else {
        layer.alert(
          "确认退出？",
          {
            title: "退出？",
          },
          (layerid) => {
            layer.close(layerid);
          }
        );
      }
    },
  },
};
</script>
<style lang="less" scoped>
.continer {
  width: 100%;
}
.nav_ection {
  width: 100%;
  background: #000000;
  opacity: 0.8;
  padding: 10px 0 10px 0;
}
.nav_content {
  width: 80%;
  margin: 0 auto;
  display: flex;
  color: #ffffff;
  align-items: center;
}
.logo_content {
  margin-right: 2rem;
  cursor:pointer;
}
.left_icon {
  width: 16%;
  display: flex;
  align-items: center;
}
.luage_settings {
  display: flex;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  align-items: baseline;
  cursor:pointer;
}
.findPage_title {
  width: 40%;
  line-height: 48px;
}
.findPage_title ul {
  display: flex;
  justify-content: space-around;
}

.findPage_title ul li {
  list-style: none;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  opacity: 0.5;
  border: 2px solid #000000;
  cursor:pointer;
}
.Selected_title {
  opacity: 1 !important;
  border-bottom: 2px solid #3659cf !important;
}
.search_content {
  width: 30%;
  cursor:pointer;
}
.search_searchs {
  width: 45%;
  display: flex;
  align-items: center;
  background: #454647;
  border-radius: 25px;
  padding-left: 16px;
  line-height: 28px;
}
.search_searchs img {
  width: 12px;
  height: 12px;
  margin-right: 10px;
}
.search_content input {
  border: 0;
  outline: 0;
  background: #454647;
  opacity: 0.9;
  color: #ffffff;
  line-height: 28px;
}
.user_content {
  display: flex;
  align-items: center;
  cursor:pointer;
}
.head_imgs img {
  width: 40px;
  height: 40px;
  background-color: #7cb1e5;
  border-radius: 50%;
  margin-right: 1rem;
}

/* qwdefd */
.language_countries {
  position: absolute;
  top: 60px;
  left: calc(100% - calc(100% - 260px));
  color: white;
  width: 110px;
  background-color: #000000;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  text-indent: 6px;
  line-height: 40px;
  z-index: 20;
  cursor:pointer;
}
.seclected_luge {
  background-color: #bfb5b5;
}

/* 设置我的下拉框 Drop_sections*/
.Drop_sections {
  position: absolute;
  top: 72px;
  right: calc(100% - calc(100% - 280px));
  color: white;
  width: 120px;
  background-color: #000000;
  font-size: 16px;   
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  text-indent: 6px;
  line-height: 50px;
  z-index: 20;
  text-align: center;
  background: #000000;
  cursor:pointer;
}
/* 这个是弹框css element ui */
.btn {
  width: 320px;
  height: 46px;
  background: linear-gradient(161deg, #637fe7, #3659cf);
  border-radius: 10px;
}
.demo-password_form,
.demo-singleForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.marriage {
  /deep/.el-input__inner {
    border-right: 0;
  }
  /deep/.el-input-group__append {
    background-color: #fff;
  }
}
.avatar-uploader {
  /deep/.el-upload {
    border: 1px solid #8c939d;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
}
.avatar-uploader {
  /deep/.el-upload:hover {
    border-color: #409eff;
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avater-div {
  display: flex;
  justify-content: center;
  align-content: center;
}
</style>